/* 
* @Description:二次封装ElementUI的分页组件 
* @Author:lxy 
* @Date:2023-03-2310:23 
*/
<template>
  <div class="PaginationTemplateClass">
    <div class="PaginationTemplateClass-total">共&nbsp;{{ total }}&nbsp;条记录</div>
    <el-pagination
    :background="true"
      :total="total"
      :disabled="disabled"
      :hide-on-single-page="hideOnSinglePage"
      :page-size="pageSize"
      :current-page="currentPage"
      :layout="layout"
      :page-sizes="pageSizes"
      @size-change="sizeChangeFunction"
      @current-change="currentChangeFunction"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "PaginationTemplate",
  props: {
    //是否禁用
    disabled: {
      typeof: Boolean,
      default: false,
    },
    //总条数
    total: {
      typeof: Number,
      default: 0,
    },
    //只有一页时是否隐藏
    hideOnSinglePage: {
      typeof: Boolean,
      default: false,
    },
    //每页显示多少条数据
    pageSize: {
      typeof: Number,
      default: 10,
    },
    //每页显示器，显示的数量
    pageSizes: {
      typeof: Array,
      default: [10, 20, 30, 40],
    },
    //目前处于第几页
    currentPage: {
      typeof: Number,
      default: 1,
    },
    //组件布局
    //取值范围： sizes, prev, pager, next, jumper, ->, total, slot
    layout: {
      typeof: String,
      default: "prev, pager, next, jumper",
    },
  },
  mounted(){
    document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = `跳至\xa0\xa0\xa0\第`
  },
  data() {
    return {};
  },
  methods: {
    sizeChangeFunction(val) {
      // 每页显示多少条数据 改变时触发
      console.log(`每页${val}条数据`);
      this.$emit("sizeChangeFunction", val);
    },
    currentChangeFunction(val) {
      //改变目前处于第几页时触发
      this.$emit("currentChangeFunction", val);
    },
  },
};
</script>

<style scoped lang="less">
.PaginationTemplateClass {
  display: flex;
  margin-top: 10px;
  height: 50px;
  justify-content: space-between;
  padding: 0px 40px;
  align-items: center;
    .PaginationTemplateClass-total{
        font: 400 13px/10px 'PingFange SC';
    }
}
</style>
